<script lang="ts" setup>
import type { LoginState, OauthLoginState } from '#/auth/login'
import { sendLoginSmsApi } from '@/api/auth'

const systemInfo = uni.getSystemInfoSync()

const model = reactive<LoginState>({
  grant_type: 'oauth:grant-type:password',
  loginType: 'member',
  username: 'admin',
  password: '123456',
  phone: '',
})

const accept = $ref(false)
const loading = ref(false)
// 验证码倒计时
let codeCountdown = $ref(60)
let codeLoading = $ref(false)

const loginType = $ref('sms')
// 登录按钮是否禁用
const sumbitDisabled = $computed(() => {
  if (loginType === 'sms') {
    return !model.phone || !model.code
  }
  else {
    return !model.username || !model.password
  }
})

function handleSubmit() {
  loading.value = true
  if (loginType === 'sms') {
    model.grant_type = 'oauth:grant-type:sms'
  }
  useUserStoreHook()
    .login(model)
    .then(() => {
      toHome()
    })
    .finally(() => {
      loading.value = false
    })
}

// 微信小程序一键登录
function handleWxMinLogin() {
  uni.showToast({
    duration: 2000,
    icon: 'loading',
    title: '登录中...',
  })
  uni.login({
    provider: 'weixin',
    success(res) {
      if (res.code) {
        useUserStoreHook()
          .login({
            grant_type: 'oauth:grant-type:third',
            code: res.code,
            type: 'WX_CHAT_MINI',
            loginType: 'member',
          } as OauthLoginState)
          .then(() => {
            toHome()
          })
      }
    },
  })
}

function toHome() {
  if (useUserStoreHook().user.initial) {
    uni.reLaunch({
      url: '/pages/index/index',
    })
    uni.showToast({
      title: '登录成功',
      icon: 'success',
      duration: 2000,
    })
  }
  else {
    uni.reLaunch({
      url: '/pages/initial/index',
    })
  }
}

// 获取验证码倒计时定时器
let codeInterval: number

// 获取验证码
function getCode() {
  if (codeLoading) {
    return
  }
  if (!model.phone) {
    uni.showToast({
      title: '请输入手机号',
      icon: 'none',
    })
    return
  }

  if (!/^1[3-9]\d{9}$/.test(model.phone)) {
    uni.showToast({
      title: '手机号格式不正确',
      icon: 'none',
    })
    return
  }

  sendLoginSmsApi(model.phone).then(() => {
    uni.showToast({
      title: '验证码已发送',
      icon: 'none',
      duration: 2000,
    })
    codeLoading = true
    codeInterval = setInterval(() => {
      if (codeCountdown > 0) {
        codeCountdown--
      }
      else {
        clearInterval(codeInterval)
        codeCountdown = 60
        codeLoading = false
      }
    }, 1000)
  })
}

function sumbit(type?: 'wxmin' | 'gitee' | 'qq' | 'wb') {
  if (sumbitDisabled) {
    return
  }
  if (!accept) {
    uni.showToast({
      title: '请先同意用户协议和隐私政策',
      icon: 'none',
    })
    return
  }
  switch (type) {
    case 'wxmin':
      handleWxMinLogin()
      break
    case 'gitee':
      break
    case 'qq':
      break
    case 'wb':
      break
    default:
      handleSubmit()
      break
  }
}
</script>

<template>
  <view class="login">
    <view
      class="banner"
      :style="{ paddingTop: `${systemInfo.safeAreaInsets?.top}px` }"
    >
      <view class="title">
        Hello
        <view class="desc">
          很高兴认识你，欢迎来到 Starry
        </view>
      </view>
      <view class="banner-img" />
    </view>
    <view class="main">
      <view class="header-tab">
        <view
          class="tab-item"
          :class="{ 'tab-item-active-left': loginType === 'sms' }"
          @click="loginType = 'sms'"
        >
          <text>短信登录</text>
        </view>
        <view
          class="tab-item"
          :class="{ 'tab-item-active-right': loginType === 'password' }"
          @click="loginType = 'password'"
        >
          <text>密码登录</text>
        </view>
      </view>
      <view class="wrap">
        <view>
          <view class="content">
            <view class="form">
              <template v-if="loginType === 'sms'">
                <view class="form-item">
                  <view class="label">
                    手机号
                  </view>
                  <view class="input">
                    <input v-model="model.phone" type="text" maxlength="11" placeholder="请输入手机号">
                  </view>
                </view>
                <view class="form-item">
                  <p class="label">
                    验证码
                  </p>
                  <view class="input">
                    <input v-model="model.code" type="text" maxlength="6" placeholder="请输入验证码">
                    <view class="code-divider" />
                    <view class="get-code" @click.stop="getCode">
                      {{ codeLoading ? `还剩余${codeCountdown}s` : '获取验证码' }}
                    </view>
                  </view>
                </view>
              </template>
              <template v-if="loginType === 'password'">
                <view class="form-item">
                  <view class="label">
                    账号
                  </view>
                  <view class="input">
                    <input v-model="model.username" type="text" maxlength="14" placeholder="请输入账号">
                  </view>
                </view>
                <view class="form-item">
                  <p class="label">
                    密码
                  </p>
                  <view class="input">
                    <input v-model="model.password" type="password" maxlength="14" placeholder="请输入密码">
                  </view>
                </view>
              </template>
              <view class="sumbit" :class="{ 'sumbit-disabled': sumbitDisabled || loading }" @click="sumbit()">
                <wd-loading v-if="loading" color="#ffffff" :size="18" />
                登录
              </view>
            </view>
          </view>

          <view class="protocol">
            <wd-checkbox v-model="accept" />
            <text>
              我已阅读并同意<text class="link">
                《用户协议》
              </text>和<text class="link">
                《隐私政策》
              </text>
            </text>
          </view>
        </view>
        <view class="other">
          <view class="other-title">
            第三方登录
          </view>
          <div class="other-list">
            <img src="https://static.xkbk.top/starry-app/wx.png" class="icon" @click="sumbit('wxmin')">
            <img src="https://static.xkbk.top/starry-app/qq.png" class="icon">
            <img src="https://static.xkbk.top/starry-app/gitee.png" class="icon">
            <img src="https://static.xkbk.top/starry-app/wb.png" class="icon">
          </div>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.login {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  box-sizing: border-box;
  .banner {
    position: relative;
    height: 16vh;
    color: white;
    padding: 0 30rpx;
    .banner-img {
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: linear-gradient(to right, #b465da 0%, #a772f6 33%, #ed81f7 66%, #ab30f2 100%);
      filter: blur(50px);
      z-index: -1;
    }

    .title {
      position: relative;
      top: 25%;
      color: white;
      font-size: 40rpx;
      .desc {
        margin-top: 20rpx;
        font-size: 26rpx;
      }
    }
  }
  .main {
    position: relative;
    top: -5vh;
    height: 85vh;
    margin: 30rpx;
    display: flex;
    flex-direction: column;
    .header-tab {
      display: flex;
      border-top-left-radius: 26rpx;
      border-top-right-radius: 26rpx;
      background: rgba(255, 255, 255, 0.2);
      overflow: hidden;
      border-top: 1px solid rgba(255, 255, 255, 0.4);
      border-right: 1px solid rgba(255, 255, 255, 0.4);
      border-left: 1px solid rgba(255, 255, 255, 0.4);
      .tab-item {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 26rpx 0;
        font-size: 16px;
        color: #4c4b4b;
      }
      .tab-item-active-left {
        position: relative;
        background: white;
        border-radius: 0 15px 0 0;
        transform: skew(20deg);
        color: #0f0f0f;
        &::before {
          position: absolute;
          content: '';
          background: radial-gradient(circle at 100% 0, transparent, transparent 20px, white 10px);
          width: 20px;
          height: 20px;
          bottom: 0;
          right: -20px;
        }
        &::after {
          content: '';
          position: absolute;
          width: 20px;
          height: 100%;
          background-color: white; //动态颜色
          left: -10px;
          top: 0;
          transform: skew(-20deg);
        }
        text {
          transform: skew(-20deg);
          font-weight: bold;
        }
      }
      .tab-item-active-right {
        position: relative;
        background: white;
        border-radius: 15px 0 0 0;
        transform: skew(-20deg);
        color: #0f0f0f;
        &::before {
          position: absolute;
          content: '';
          background: radial-gradient(circle at 0% 0%, transparent, transparent 20px, white 10px);
          width: 20px;
          height: 20px;
          bottom: 0;
          left: -20px;
        }
        &::after {
          content: '';
          position: absolute;
          width: 20px;
          height: 100%;
          background-color: white; //动态颜色
          right: -10px;
          top: 0;
          transform: skew(20deg);
        }
        text {
          transform: skew(20deg);
          font-weight: bold;
        }
      }
    }
    .content {
      position: relative;
      background: white;
      display: flex;
      .form {
        padding: 30rpx;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 20px;
        .form-item {
          width: 100%;
          .label {
            font-size: 14px;
            margin-bottom: 10px;
            color: #373838;
            display: flex;
            justify-content: space-between;
          }
          .input {
            position: relative;
            height: 45px;
            background: rgb(240, 246, 251);
            border-radius: 20px;
            padding: 0 30rpx;
            input {
              width: 100%;
              height: 100%;
              color: #4f5050;
              font-size: 14px;
            }
            .input-placeholder {
              color: #808283;
            }
            .get-code {
              z-index: 9;
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              right: 30rpx;
              font-size: 26rpx;
              color: #6e72fd;
            }
            .code-divider {
              position: absolute;
              content: '';
              top: 50%;
              transform: translateY(-50%);
              width: 1px;
              height: 25rpx;
              right: 190rpx;
              background: #ccc;
            }
          }
        }
      }
      .sumbit {
        width: 100%;
        margin-top: 30rpx;
        padding: 25rpx 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        border-radius: 30px;
        gap: 16rpx;
        background-image: linear-gradient(to left, #b224ef 0%, #7579ff 100%);
      }
      .sumbit-disabled {
        background-image: linear-gradient(to left, #d179f6 0%, #b6b8fa 100%) !important;
      }
    }
    .protocol {
      margin-top: 30rpx;
      margin-left: 40rpx;
      display: flex;
      align-items: center;
      text {
        font-size: 26rpx;
        color: #b0b4b5;
        .link {
          color: #9498ff;
        }
      }
    }
    .other {
      width: 100%;
      color: #dddddd;
      font-size: 26rpx;
      .other-title {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .other-list {
        margin-top: 40rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 50rpx;
        .icon {
          width: 30px;
          height: 30px;
        }
      }
    }
  }
  .wrap {
    display: flex;
    height: 80%;
    flex-direction: column;
    justify-content: space-between;
  }
}
</style>
